<template>
  <section class="margin-table">
    <div class="module-opera" >
      <el-form :model='detail' :rules="rules" ref="detail" label-width="170px" >
        <el-form-item label="品牌名称：">
          <span>{{detail.brandName}}</span>
        </el-form-item>

        <el-form-item label="sku关键词：">
          <span>{{detail.skuWord}}</span>
        </el-form-item>

        <el-form-item label="平台：">
          <span>{{detail.platTypeText}}</span>
        </el-form-item>

        <el-form-item label="白名单低价区间：">
          <input class="input" type='tel' v-model="detail.whiteLowDown" style='width: 160px;'></input>
          &nbsp;&nbsp;----&nbsp;&nbsp;
          <input class="input" type='tel' v-model="detail.whiteLowUp" style='width: 130px;'></input>
          &nbsp;&nbsp;元
        </el-form-item>

        <el-form-item label="非白名单低价区间：">
          <input class="input" type='tel' v-model="detail.lowDown" style='width: 160px;'></input>
          &nbsp;&nbsp;----&nbsp;&nbsp;
          <input class="input" type='tel' v-model="detail.lowUp" style='width: 130px;'></input>
          &nbsp;&nbsp;元
        </el-form-item>

        <el-form-item label="假货价格区间：">
          <input class="input" type='tel' v-model="detail.fakeDown" style='width: 160px;'></input>
          &nbsp;&nbsp;----&nbsp;&nbsp;
          <input class="input" type='tel' v-model="detail.fakeUp" style='width: 130px;'></input>
          &nbsp;&nbsp;元
        </el-form-item>

        <el-form-item label="搜索方式：" prop='searchTypeText'>
          <el-radio-group v-model="detail.searchTypeText">
             <el-radio label="品牌+关键词"></el-radio>
             <el-radio label="关键词"></el-radio>
           </el-radio-group>
        </el-form-item>

        <el-form-item label="备注：">
          <el-input type="textarea" :maxlength='200' v-model="detail.remark" placeholder='请输入备注' style='width: 370px;height:210px;'></el-input>
        </el-form-item>
        
        <div class="bottom-btn" style="margin-left:200px;">
            <el-button @click="submitForm(detail)"  type="primary" size="small">提交</el-button>
        </div>

      </el-form>
    </div>
  </section>
</template>
<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree,Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog, Autocomplete, RadioGroup ,Radio
    } from 'element-ui'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Tree);
    Vue.use(Autocomplete);
    Vue.use(Radio);
    Vue.use(RadioGroup);

    Vue.prototype.$message = Message;

    export default {
      head(){
          return {
              title: "编辑关键词",
              meta: [
                  { hid: 'keywordadd', name: 'keywordadd', content: 'keywordadd'}
              ]
          }
      },
      data() {
        return {
          tabName: '编辑关键词',
          detail: {},
          rules: {
            searchTypeText: [
              { required: true, message: '请选择活动资源', trigger: 'change' }
            ],
          }
        }
      },
      watch: {
        detail: {
          deep:true,//深度复制
          handler: function (val, oldVal) {
            // if (parseInt(this.detail.whiteLowDown) > parseInt(this.detail.whiteLowUp)) {
            //   this.detail.whiteLowUp = this.detail.whiteLowDown
            // }
            // if (parseInt(this.detail.lowDown) > parseInt(this.detail.lowUp)) {
            //   this.detail.lowUp = this.detail.lowDown
            // }
            // if (parseInt(this.detail.fakeDown) > parseInt(this.detail.fakeUp)) {
            //   this.detail.fakeDown = this.detail.fakeUp
            // }
            // if (parseInt(this.detail.fakeUp) > parseInt(this.detail.lowDown)) {
            //   this.detail.fakeUp = this.detail.lowDown
            // }
            // if (parseInt(this.detail.fakeUp) > parseInt(this.detail.whiteLowDown)) {
            //   this.detail.fakeUp = this.detail.whiteLowDown
            // }
            // let that =this
            // setTimeout(function () {
            //   that.detail.whiteLowDown = that.detail.whiteLowDown.replace(/[^0-9]/ig,"")
            //   that.detail.whiteLowUp = that.detail.whiteLowUp.replace(/[^0-9]/ig,"")
            //   that.detail.lowDown = that.detail.lowDown.replace(/[^0-9]/ig,"")
            //   that.detail.lowUp = that.detail.lowUp.replace(/[^0-9]/ig,"")
            //   that.detail.fakeDown = that.detail.fakeDown.replace(/[^0-9]/ig,"")
            //   that.detail.fakeUp = that.detail.fakeUp.replace(/[^0-9]/ig,"")
            // },1000)
          },
        }
      },
      computed: {
          ...mapGetters({
              'pageTabsList': 'getPageTabsList',
              'currentPage': 'currentPageKeyword',
              'totalCount': 'totalCountKeyword',
              'pageSize': 'pageSizeKeyword',
          }),
          id() {
            return this.$route.query.id
          }
      },
      methods: {
        getDetail() {
          this.$store.dispatch('getKeywordDetail', {
            keywordId:this.$route.query.id,
          }).then(res=> {
            if (res) {
              this.detail = res.data.data
            }
          })
        },
        submitForm(detail) {
          this.$refs.detail.validate((valid) => {
            if (valid) {
              if (parseFloat(this.detail.whiteLowDown)>parseFloat(this.detail.whiteLowUp) || parseFloat(this.detail.lowDown)>parseFloat(this.detail.lowUp) || parseFloat(this.detail.fakeDown)>parseFloat(this.detail.fakeUp) || parseFloat(this.detail.fakeUp)>parseFloat(this.detail.lowDown) || parseFloat(this.detail.fakeUp)>parseFloat(this.detail.whiteLowDown)) {
                this.$message({
                  message: '请输入正确的价格区间',
                  type: 'error'
                });
              }else {
                if (this.detail.fakeDown==null) {
                  this.detail.fakeDown = ''
                }
                if (this.detail.fakeUp==null) {
                  this.detail.fakeUp = ''
                }
                if (this.detail.whiteLowUp==null) {
                  this.detail.whiteLowUp = ''
                }
                if (this.detail.whiteLowDown==null) {
                  this.detail.whiteLowDown = ''
                }
                if (this.detail.lowDown==null) {
                  this.detail.lowDown = ''
                }
                if (this.detail.lowUp==null) {
                  this.detail.lowUp = ''
                }
                if (
                  (
                    ((String(this.detail.fakeDown)=='' && String(this.detail.fakeUp)=='') || (String(this.detail.fakeDown)!='' && String(this.detail.fakeUp)!='')) && 
                    ((String(this.detail.whiteLowDown)=='' && String(this.detail.whiteLowUp)=='') || (String(this.detail.whiteLowDown)!='' && String(this.detail.whiteLowUp)!=''))
                     && 
                    ((String(this.detail.lowDown)=='' && String(this.detail.lowUp)=='') || (String(this.detail.lowDown)!='' && String(this.detail.lowUp)!=''))
                  )
                ) {
                  this.updateKeyword()
                }else {
                  this.$message({
                      message: '请完整填写某一价格区间高低价',
                      type: 'error'
                    });
                }             
              }
            } else {
             return false;
            }
          });
        },
        updateKeyword() {
          let search = ''         
          switch (this.detail.searchTypeText) {
            case '品牌+关键词':
              search = 2
              break;
            case '关键词':
              search = 1
              break;
          }

          this.$store.dispatch('updateKeyword',{
            keywordId: this.id,
            whiteLowDown: this.detail.whiteLowDown,
            whiteLowUp: this.detail.whiteLowUp,
            lowDown: this.detail.lowDown,
            lowUp: this.detail.lowUp,
            fakeDown: this.detail.fakeDown,
            fakeUp: this.detail.fakeUp,
            searchType: search,
            remark: this.detail.remark,
          }).then((res)=>{
              if (res) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$router.push({path:'/keyWord'})
              }
              
          })
        }
      },
      created () {
        
          //pageTab
          if(process.BROWSER_BUILD) {
              if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                  let arr = this.pageTabsList;
                  arr[arr.length-1].name = this.tabName;
                  this.$store.commit('PAGETABSLIST',{data:arr})
              }
          } 
          this.getDetail()  
      }
    }

</script>
<style lang="scss">
  .margin-table {
    margin-top: 20px;
  }
  .input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    display: block;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 160px;
    display: inline-block;
    outline: none;
    &:focus {
      border-color: rgb(32,160,255);
    }
  }
  .el-textarea__inner {
    height: 100%;
  }
</style>